<template>
	<view>
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>互动</text>
			</view>
			<view class="titleRight">
		
			</view>
		</view>
		<!-- 头像 昵称 -->
		<view class="top">
			<view class="left">
				<view class="img">
					<img src="" alt="">
				</view>
				<view class="">
					<view class="text">
						昵称
					</view>
					<view class="">
						简介...
					</view>
				</view>
			</view>
			<view class="right">
				<button>+关注</button>
			</view>
		</view>
		<!-- 文章内容 -->
		<view class="content">
			文章内容
		</view>
		<!-- 发布 -->
		<view class="fabu" @click="handerClick">
			发布
		</view>
		<!-- 底部 -->
		<view class="bom-box">
			<view class="bom-left">
				说说想法
			</view>
			<view class="bom-right">
				<uni-icons type="redo" size="26" @click="onClick"></uni-icons>
				<uni-icons type="chat" size="26"></uni-icons>
				<text>12</text>
				<uni-icons type="hand-up" size="26"></uni-icons>
				<!-- <uni-icons type="hand-up-filled"></uni-icons> -->
				<text>280</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '互动'
			};
		},
		methods: {
			// 跳转到分享
			onClick() {
				uni.navigateTo({
					url:'/pagesB/share/share'
				})
			},
			goBack() {
				uni.navigateBack(1)
			},
			// 跳转到发布页面
			handerClick() {
				uni.navigateTo({
					url:'/pages/interact/issue'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.top {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 20rpx 40rpx 0 30rpx;
		box-sizing: border-box;

		.left {
			display: flex;

			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-bottom: 20rpx;
			}
		}

		.right {
				padding-top: 20rpx;
			button {
				width: 150rpx;
				line-height: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 24rpx;
			}
		}
	}
	.content {
		padding: 40rpx 30rpx;
	}
	.fabu {
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		width: 100rpx;
		line-height: 100rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		text-align: center;
	}
	.bom-box {
		position: fixed;
		bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding:  0 10rpx;
		box-sizing: border-box;
		.bom-left {
			width: 50%;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-color: #f7f7f7;
			padding-left: 20rpx;
			box-sizing:border-box;
		}
		.bom-right {
			padding-top: 10rpx;
		}
		.uniui-hand-up[data-v-a2e81f6e]:before {
			margin-left: 20rpx;
		}
		.uniui-chat[data-v-a2e81f6e]:before {
			margin-left: 20rpx;
		}
	}
</style>
